<template>
  <div>
    <v-header :seller="seller"></v-header>
    <div class="tab">
      <div :class="{activeLink: currentPath === '/goods','tab-item':true}">
        <router-link :to="{path:'/goods'}">商品</router-link>
      </div>
      <div :class="{activeLink: currentPath === '/ratings','tab-item':true}">
        <router-link :to="{path:'/ratings'}">评论</router-link>
      </div>
      <div :class="{activeLink: currentPath === '/seller','tab-item':true}">
        <router-link :to="{path:'/seller'}">商家</router-link>
      </div>
    </div>
    <shop-cart ref="shopCart" :minPrice="seller.minPrice" :deliveryPrice="seller.deliveryPrice"></shop-cart>
    <keep-alive>
      <router-view :seller="seller" @drop="drop"></router-view>
    </keep-alive>
  </div>
</template>
<script>
import header from './header/Header'
import shopCart from './shopcart/Shopcart'
export default {
  data() {
    return {
      seller: {}
    }
  },
  components: {
    vHeader: header,
    shopCart
  },
  created() {
    this.getSeller()
  },
  methods: {
    async getSeller() {
      const { data: res } = await this.$http.get('seller')
      this.seller = res.data
    },
    drop(el) {
      this.$nextTick(() => {
        this.$refs.shopCart.drop(el)
      })
    }
  },
  computed: {
    currentPath() {
      return this.$router.history.current.path
    }
  }
}
</script>
<style lang="stylus" scoped>
.tab {
  display: flex;
  width: 100%;
  height: 0.8rem;
  line-height: 0.8rem;
  border-bottom: 1px solid rgba(7, 17, 27, 0.1);

  .tab-item {
    flex: 1;
    text-align: center;

    a {
      color: #4d5535;
    }

    .active {
      color: rgb(240, 20, 20);
    }
  }
}
</style>
